<mat-toolbar class="topbar lola">
  <mat-toolbar-row>
    <!-- Sidenav toggle button -->
    <button mat-icon-button id="sidenavToggle" (click)="toggleSidenav()" [matTooltip]="mat_tooltips.toggle_hide | translate" matTooltipPosition="right"
      ix-auto ix-auto-type="button" ix-auto-identifier="sidenavToggle">
      <mat-icon>menu</mat-icon>
    </button>
    <!-- Sidenav toggle collapse -->
    <button *ngIf="sidenav.opened" mat-icon-button id="collapseToggle" fxHide.lt-mat="true" (click)="toggleCollapse()" [matTooltip]="mat_tooltips.toggle_collapse | translate" class="toggle-collapsed"
      ix-auto ix-auto-type="button" ix-auto-identifier="collapseToggle">
      <mat-icon>chevron_left</mat-icon>
    </button>
    <!-- Search form
      <div
      fxFlex
      fxHide.lt-sm="true"
      class="search-bar">
      <form class="top-search-form">
      <mat-icon role="img">search</mat-icon>
      <input autofocus="true" placeholder="Search" type="text">
      </form>
      </div -->
      <span fxFlex></span>
      <div>
        <mat-icon (click)="openIX()" 
          [svgIcon]="screenSize == 'xs' ? 'ix_logomark' : 'ix_full_logo'" 
          alt="iXsystems logo" 
          class="ix-logo {{screenSize}}">
        </mat-icon>
      </div>

      <!-- truecommand-->
      <button mat-icon-button id="tc-connecting" [matTooltip]="mat_tooltips.tc_connect | translate" class="topbar-button-right"
        ix-auto ix-auto-type="button" ix-auto-identifier="tcConnecting" *ngIf="tcStatus && tcStatus.status === 'CONNECTING'" (click)="stopTCConnecting()">
        <mat-icon class="movement" svgIcon="truecommand_logo_white"></mat-icon>
      </button>
      <button mat-icon-button id="tc-status" [matTooltip]="mat_tooltips.tc_status | translate" class="topbar-button-right" (click)="showTCStatus()"
        ix-auto ix-auto-type="button" ix-auto-identifier="tcStatus" *ngIf="tcStatus && tcStatus.status !== 'CONNECTING'">
        <mat-icon svgIcon="truecommand_logo_white" *ngIf="tcStatus.status === 'CONNECTED'"></mat-icon>
        <mat-icon svgIcon="truecommand_logo_red" *ngIf="tcStatus.status === 'FAILED'"></mat-icon>
        <mat-icon svgIcon="truecommand_logo_grey" *ngIf="tcStatus.status === 'DISABLED'"></mat-icon>
      </button>
      <!-- finish update -->
      <button *ngIf="upgradeWaitingToFinish" mat-icon-button id="finish-update" [matTooltip]="mat_tooltips.upgrade_waiting | translate" (click)="upgradePendingDialog()" class="topbar-button-right"
        ix-auto ix-auto-type="button" ix-auto-identifier="upgradeWaiting">
        <mat-icon class="movement">update</mat-icon>
      </button>
      <!--loading icon-->
      <button *ngIf="updateIsRunning" mat-icon-button id="update-running" [matTooltip]="mat_tooltips.update | translate" (click)="showUpdateDialog()" class="topbar-button-right"
        ix-auto ix-auto-type="button" ix-auto-identifier="updateRunning">
        <mat-icon class="movement">system_update_alt</mat-icon>
      </button>
      <button *ngIf="pendingNetworkChanges" mat-icon-button id="network" [matTooltip]="mat_tooltips.pending_network_changes | translate" (click)="showNetworkChangesPending()" class="topbar-button-right"
        ix-auto ix-auto-type="button" ix-auto-identifier="networkPending">
        <mat-icon class="movement">device_hub</mat-icon>
      </button>
      <button *ngIf="showResilvering" mat-icon-button id="resilver" [matTooltip]="mat_tooltips.resilvering | translate" (click)="showResilveringDetails()" class="topbar-button-right"
        ix-auto ix-auto-type="button" ix-auto-identifier="resilvering">
        <mat-icon class="fa-spin">autorenew</mat-icon>
      </button>
      <!-- HA Status -->
      <span *ngIf="is_ha && ha_status_text">
      <button *ngIf="ha_disabled_reasons.length === 0" mat-icon-button id="ha" [matTooltip]="ha_status_text | translate" (click)="showHAStatus()"
        ix-auto ix-auto-type="button" ix-auto-identifier="haStatus">
        <mat-icon svgIcon="ha_enabled"></mat-icon>
      </button>
      <button *ngIf="ha_disabled_reasons.length > 0" mat-icon-button id="ha" [matTooltip]="ha_status_text | translate" (click)="showHAStatus()"
        ix-auto ix-auto-type="button" ix-auto-identifier="haStatus">
        <mat-icon *ngIf="ha_disabled_reasons[0] === 'NO_SYSTEM_READY';else HADisabled" svgIcon="ha_reconnecting"></mat-icon>
        <ng-template #HADisabled>
          <mat-icon svgIcon="ha_disabled"></mat-icon>
        </ng-template>
      </button>
      </span>
      <!-- Directory Services Monitor -->
      <button mat-icon-button *ngIf="showDirServicesIcon" id="dirservices-manager" [matTooltip]="mat_tooltips.directory_services_monitor | translate" (click)="onShowDirServicesMonitor()"
        ix-auto ix-auto-type="button" ix-auto-identifier="dirServices">
        <mat-icon>info</mat-icon>
      </button>
      <!-- Task Manager -->
      <button mat-icon-button id="task-manager" [matTooltip]="mat_tooltips.task_manager | translate" (click)="onShowTaskManager()" 
        ix-auto ix-auto-type="button" ix-auto-identifier="taskManager">
        <mat-icon>assignment</mat-icon>
      </button>
      <!-- Notification toggle button -->
      <button mat-icon-button [matTooltip]="mat_tooltips.alerts | translate" (click)="toggleNotific()" [style.overflow]="'visible'" class="topbar-button-right"
        ix-auto ix-auto-type="button" ix-auto-identifier="notifications">
        <mat-icon>notifications</mat-icon>
        <span *ngIf="notifications.length > 0" class="notification-number mat-bg-warn">{{notifications.length}}</span>
      </button>
      <!-- User and UI menu -->
      <button name="Settings" mat-icon-button [matTooltip]="mat_tooltips.settings | translate" [matMenuTriggerFor]="accountMenu" class="topbar-button-right" (click)="checkLegacyUISetting()"
        ix-auto ix-auto-type="button" ix-auto-identifier="settings">
          <mat-icon>settings</mat-icon>
      </button>
      <mat-menu #accountMenu="matMenu">
        <!--button mat-menu-item (click)="$event.stopPropagation()" [matMenuTriggerFor]="languageMenu">
          <mat-icon>translate</mat-icon>
          <ng-container *ngFor="let lang of language.availableLangs">
            <span *ngIf="lang.code == language.currentLang">{{ lang.name }}</span>
          </ng-container>
        </button-->
        <button class="hidden-button" mat-menu-item></button>
        <button name="settings-change-password" mat-menu-item [routerLink]="['/credentials/users/change-password']"
          ix-auto ix-auto-type="option" ix-auto-identifier="Change Password">
          <mat-icon>dialpad</mat-icon>
          <span>{{'Change Password' | translate}}</span>
        </button>
        <button name="settings-preferences" mat-menu-item [routerLink]="['/ui-preferences']"
          ix-auto ix-auto-type="option" ix-auto-identifier="Preferences">
          <mat-icon>settings_applications</mat-icon>
          <span>{{'Preferences' | translate}}</span>
        </button>
        <!-- button name="settings-disable-alerts" mat-menu-item>
          <mat-icon>notifications_off</mat-icon>
          <span>Disable alerts</span>
        </button -->
        <button name="settings-api" mat-menu-item [routerLink]="['/apikeys']"
          ix-auto ix-auto-type="option" ix-auto-identifier="API">
          <mat-icon>laptop</mat-icon>
          <span>{{'API Keys' | translate}}</span>
        </button>
        <button name="settings-about" mat-menu-item (click)="onShowAbout()"
          ix-auto ix-auto-type="option" ix-auto-identifier="About">
          <mat-icon>info_outline</mat-icon>
          <span>{{'About' | translate}}</span>
        </button>
        <button *ngIf="exposeLegacyUI" name="settings-legacy-ui" mat-menu-item (click)="onGoToLegacy()"
          ix-auto ix-auto-type="option" ix-auto-identifier="Legacy Web Interface">
          <mat-icon>keyboard_return</mat-icon>
          <span>{{'Legacy Web Interface' | translate}}</span>
        </button>
      </mat-menu>
      <!-- Top right power menu -->
      <button name="Power" mat-icon-button [matTooltip]="mat_tooltips.power | translate" [matMenuTriggerFor]="runMenu" class="topbar-button-right"
        ix-auto ix-auto-type="button" ix-auto-identifier="power">
          <mat-icon>power_settings_new</mat-icon>
        </button>
        <mat-menu #runMenu="matMenu">
            <button class="hidden-button" mat-menu-item></button>
            <button name="power-log-out" mat-menu-item (click)="signOut()"
              ix-auto ix-auto-type="option" ix-auto-identifier="Log Out">
              <mat-icon>exit_to_app</mat-icon>
              <span>{{'Log Out' | translate}}</span>
            </button>
            <button name="power-restart" mat-menu-item (click)="onReboot()"
              ix-auto ix-auto-type="option" ix-auto-identifier="Restart">
              <mat-icon>replay</mat-icon>
              <span>{{'Restart' | translate}}</span>
            </button>
            <button name="power-shut-down" mat-menu-item (click)="onShutdown()"
              ix-auto ix-auto-type="option" ix-auto-identifier="Shut Down">
              <mat-icon>power_settings_new</mat-icon>
              <span>{{'Shut Down' | translate}}</span>
            </button>
        </mat-menu>
      <mat-menu #languageMenu="matMenu" [overlapTrigger]="false" xPosition="after">
        <ng-container *ngFor="let lang of language.availableLangs">
          <button mat-menu-item (click)="setLang(lang.code)">
            <span>{{ lang.name }}</span>
            <!--span class="flag-icon" [ngClass]="{'flag-icon-us': lang.code === 'en'}" *ngIf="lang.code == 'en'">{{ lang.name }}</span>
              <span class="flag-icon" [ngClass]="{'flag-icon-es': lang.code === 'es'}" *ngIf="lang.code == 'es'">{{ lang.name }}</span>
              <span class="flag-icon" [ngClass]="{'flag-icon-cn': lang.code === 'zh-hans'}" *ngIf="lang.code == 'zh-hans'">{{ lang.name }}</span-->
          </button>
        </ng-container>
      </mat-menu>
  </mat-toolbar-row>
</mat-toolbar>
